<template>
	<div class="header">
		<div class="logo" :class="{'on' : channelName !== ''}">
			<router-link :to="{name:'home'}"><img :src="Logo" /></router-link>
			<span>{{channelName}}</span>
		</div>
		<div class="menu">
			<Login :login="islogin" :user="user" :searchKey="searchKey"></Login>
		</div>
	</div>
</template>

<script>
	import Login from "../../components/common/HeaderLogin.vue"
	export default {
		name: "Header",
		data:function(){
			return {
				
			}
		},
		props:["Logo", "channelName","searchKey", "islogin", "user"],
		components:{
			Login
		},
		created: function(){
			/*let that = this;
			this.$http.jsonp(this.$store.state.api.userSignInApi).then(function(res){
				//console.log(res);
				var data = res.body;
				that.$store.commit("setUser", data);
				that.$set(that, "is", data.islogin === "False" ? false : true);
				that.$set(that, "user", data);
			}, function(){
				
			})*/
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	.header{
		display: flex;
		padding:5/@base 0 5/@base 20/@base;
		div{
			&.logo{
				width: 62*2/@base;
				height: 35*2/@base;
				&.on{
					display:flex;
					width: 300/@base;
					a{
						width:45%;
					}
					span{
						width:55%;
						color:#fff;
						margin-left:10/@base;
						font-size:26/@base;
						line-height:75/@base;
					}
				}
				a{
					width:100%;
					height:100%;
					display:block;
					img{
						width:100%;
						height:100%;
					}
				}
			}
			&.menu{
				width:99%;
			}
		}
	}
</style>
